<template>
  <div class="chart-card" style="grid-column: span 8;">
    <h2><i class="icon-yin-yang"></i> 体质与五行关系</h2>
    <div class="five-elements-container">
      <div ref="fiveElementsChart" class="chart-container" style="width: 100%;"></div>
      <div class="five-elements-table">
        <table>
          <thead>
            <tr>
              <th>五行</th>
              <th>特性</th>
              <th>相关体质</th>
              <th>对应脏腑</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in fiveElementsData" :key="item.element">
              <td><span :class="'element-' + item.element">{{ item.element }}</span></td>
              <td>{{ item.character }}</td>
              <td>{{ item.constitutions }}</td>
              <td>{{ item.organs }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'FiveElementsChart',
  props: {
    fiveElementsData: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.fiveElementsChart);
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}'
        },
        series: [
          {
            name: '五行关系',
            type: 'graph',
            layout: 'circular',
            circular: {
              rotateLabel: true
            },
            data: [
              { name: '木', value: 1, symbolSize: 50, itemStyle: { color: '#8BC34A' } },
              { name: '火', value: 1, symbolSize: 50, itemStyle: { color: '#F44336' } },
              { name: '土', value: 1, symbolSize: 50, itemStyle: { color: '#FFC107' } },
              { name: '金', value: 1, symbolSize: 50, itemStyle: { color: '#607D8B' } },
              { name: '水', value: 1, symbolSize: 50, itemStyle: { color: '#2196F3' } }
            ],
            links: [
              { source: '木', target: '火' },
              { source: '火', target: '土' },
              { source: '土', target: '金' },
              { source: '金', target: '水' },
              { source: '水', target: '木' }
            ],
            categories: this.fiveElementsData.map(item => ({ name: item.element })),
            label: {
              show: true,
              position: 'inside',
              formatter: '{b}',
              fontSize: 16,
              fontWeight: 'bold'
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            },
            emphasis: {
              focus: 'adjacency',
              lineStyle: {
                width: 4
              }
            }
          }
        ]
      };
      chart.setOption(option);
    },
    handleResize() {
      this.$nextTick(() => {
        echarts.getInstanceByDom(this.$refs.fiveElementsChart)?.resize();
      });
    }
  }
};
</script>

<style scoped>
.chart-container {
  height: 280px;
}

.five-elements-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.five-elements-table {
  flex: 1;
  background: #f8f9fa;
  padding: 8px;
  border-radius: 4px;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid #ebeef5;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  font-size: 12px;
}

th {
  background-color: #3498db;
  color: white;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #e9e9e9;
}

.element-木 { color: #8BC34A; font-weight: bold; }
.element-火 { color: #F44336; font-weight: bold; }
.element-土 { color: #FFC107; font-weight: bold; }
.element-金 { color: #607D8B; font-weight: bold; }
.element-水 { color: #2196F3; font-weight: bold; }
</style>